<template>
  <div>
    <!-- 渲染内容图片 -->
    <div class="calass">
      <div class="Firstbox"> <img
          src="https://yanxuan.nosdn.127.net/403ef629810368c9b3e0e6fd863ebb4e.jpg?type=webp&imageView&&thumbnail=1090x310&quality=95"
          alt=""></div>
      <div class="Secondbox">
        <div class="imgbox" v-for="(_rawValue, id) in tableData" :key="id">
          <div>
            <img :src="_rawValue.img" alt="">
          </div>
          <div class="prdtTags"></div>
          <div class="bd">
            <h4 class="name"><a href="#">{{ _rawValue.name }}</a></h4>
          </div>
          <div class="Pricebox"><span>{{ _rawValue.Discount }}</span>
            <span class="Price2">{{ _rawValue.Price }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue';


// setup() {
const tableData = ref([])


function loadList() {
  axios.get('http://localhost:3001/Livingdata').then(res => {
    tableData.value = res.data
  })


}

onMounted(() => {
  loadList()

})

// async function loadList() {
//   const { res } = await axios.get('http://localhost:3001/users')
//   console.log(res);
//   console.log(12121);
// }

</script>

<style  lang="less" scoped>
.calass {

  .Firstbox {
    width: 1100px;
    height: 310px;
    margin: 15px auto;

    img {
      width: 100%;
      height: 100%;
    }

  }

  .Secondbox {
    width: 1100px;
    height: 410px;
    display: flex;
    justify-content: space-between;
  }

  .imgbox {
    width: 265px;
    height: 100%;
    min-height: 1px;


    img {
      width: 265px;
      height: 265px;
    }

    .prdtTags {
      height: 20px;
      font-size: 0;
      color: #fff;
      width: 200px;
      margin: 0 auto 3px;
      overflow: hidden;
    }

    .bd {
      width: 265px;
      width: 92px;

      .name {
        width: 166px;
        margin-left: 45px;
        max-height: 40px;
        line-height: 20px;
        text-align: center;
      }

    }

    .Pricebox {
      width: 100%;
      margin-top: 10px;
      text-align: center;

      .Price2 {
        margin-left: 10px;
        color: #999999;
        text-decoration: line-through
      }
    }
  }
}
</style>